package com.lazycoffee.lcloancalculator.components

import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ComposeAttr
import com.tencent.kuikly.core.base.ComposeEvent
import com.tencent.kuikly.core.base.ComposeView
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.base.ViewContainer
import com.tencent.kuikly.core.directives.velse
import com.tencent.kuikly.core.directives.vfor
import com.tencent.kuikly.core.directives.vif
import com.tencent.kuikly.core.reactive.handler.observableList
import com.tencent.kuikly.core.views.View
import com.tencent.kuikly.core.views.compose.Button

data class OptionData<T>(val label: String, val value: T)

internal class FieldAttr : ComposeAttr() {
    var labelText: String = "标签"
    var placeholder: String = "请输入"
    var isNumber: Boolean = false
    var options: List<OptionData<String>> = emptyList()
    var selected: String = ""
}

internal class InputFieldView : ComposeView<FieldAttr, ComposeEvent>() {
    override fun createAttr(): FieldAttr {
        return FieldAttr()
    }

    override fun createEvent(): ComposeEvent {
        return ComposeEvent()
    }

    private var optionList by observableList<OptionData<String>>()

    override fun created() {
        super.created()
        for (i in 0 until this.attr.options.size) {
            optionList.add(this.attr.options[i])
        }
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            View {
                attr {
                    marginBottom(20F)
                }
                FormLabel {
                    attr {
                        labelText = ctx.attr.labelText
                    }
                }
                FormInput {
                    attr {
                        inputPlaceholder = ctx.attr.placeholder
                        isNumber = ctx.attr.isNumber
                    }
                }
                vif({ ctx.optionList.isNotEmpty() }) {
                    vfor({ ctx.optionList }) { option ->
                        vif({ ctx.attr.selected == option.value }) {
                            Button {
                                attr {
                                    height(40F)
                                    backgroundColor(Color(150, 128, 114, 1F))
                                    titleAttr {
                                        text(option.label)
                                    }
                                }
                            }
                        }
                        velse {
                            Button {
                                attr {
                                    backgroundColor(Color(190, 168, 154, 1F))
                                    height(40F)
                                    titleAttr {
                                        text(option.label)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

internal fun ViewContainer<*, *>.InputField(init: InputFieldView.() -> Unit) {
    addChild(InputFieldView(), init)
}